<template>
	<view class="page content-20">
		<view class="headers">
			<image class="img" src="../static/bg_08.png" mode=""></image>
			<view class="balance-title">当前余额(元)</view>
			<view class="balance-money">
				<view class="money">999</view>
				<view class="bgn" @click="$link('/pagesMine/balanceRecord')">查看明细</view>
			</view>
		</view>
		
		<view class="fill-input">
			<view class="fill-item">
				<view class="val">50 <text class="small">元</text></view>
				<view class="desc">送2元</view>
			</view>
			
			<view class="fill-item fill-item-active">
				<view class="val">50 <text class="small">元</text></view>
				<view class="desc">送2元</view>
			</view>
			
			<view class="fill-item is-recommend">
				<view class="val">50 <text class="small">元</text></view>
				<view class="desc">送2元</view>
				<!-- <view class="jian">荐</view> -->
			</view>
			
			<view class="fill-item">
				<view class="other">其他金额</view>
			</view>
		</view>
		
		<view class="tips">注：充值满99元即可升级为VIP会员</view>
		
		<view class="circular-submit">微信支付</view>
		
		<!-- 其他金额 -->
		<view :class="isShowPop?'pop-wrap pop-wrap-active':'pop-wrap'">
			<view class="pop-content" >
				<view class="pop-title">
					<view class="close" @click.stop="setIsPopShow(false)">
						<u-icon name='close' size='30'></u-icon>
					</view>
					<view class="title">
						<text>请填写充值金额</text>
					</view>
				</view>
				<scroll-view class="scroll-view" scroll-y="true" >
					<view class="form-group">
						<view class="form-group__title">充值金额</view>
						<view class="form-group__con">
							<input class="form-group__from " type="number" placeholder="请填写充值金额" placeholder-class="placeholder-class" />
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="pop-btn">确定</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data(){
			return{
				isShowPop: false
			}
		},
		methods:{
			setIsPopShow(status) {
				this.isShowPop = status
			}
		}
	}
</script>

<style scoped lang="scss">
	.content-20{
		padding: 30upx;
	}
	.headers{
		position: relative;
		width: 100%;
		height: 250upx;
		border-radius: 10upx;
		padding: 30upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		    justify-content: space-between;
	}
	.img{
		position: absolute;
		width: 100%;
		height: 250upx;
		left: 0;
		top: 0;
		display: block;
	}
	.balance-title{
		position: relative;
		color: #fff;
		font-size: $font-size-24;
		width: 100%;
	}
	.balance-money{
		@include flex-base;
		justify-content: space-between;
		position: relative;
		width: 100%;
	}
	.money{
		font-weight: bold;
		font-size: 90upx;
		line-height: 90upx;
		height: 90upx;
		color: #fff;
	}
	.bgn{
		height: 50upx;
		text-align: 50upx;
		line-height: 50upx;
		font-size: $font-size-24;
		color: #fff;
		border-radius: 50upx;
		border: 1px solid #fff;
		padding: 0 30upx;
	}
	.fill-input{
		@include flex-base;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 80upx 0 30upx 0;
	}
	.fill-item{
		border-radius: 10upx;
		border: 1px solid $border-color;
		margin-bottom: 20upx;
		@include flex-base;
		justify-content: center;
		flex-direction: column;
		flex-wrap: wrap;
		width: 202upx;
		height: 135upx;
		.desc{
			margin-top: 10upx;
		}
	}
	.val{
		font-size: 40upx;
		line-height: 40upx;
		font-weight: bold;
		height: 40upx;
	}
	.small{
		font-size: $font-size-24;
	}
	.tips{
		color: $red;
		font-weight: bold;
		text-align: center;
		font-size: $font-size-24;
	}
	.other-money{
		padding: 0 10upx;
	}
</style>
